<template>
    <div class="tabbar">
        <ul>
            <!-- <li><a href="#/films">电影</a></li> -->
            <!-- <li><a href="#/cinemas">影院</a></li> -->
            <!-- <li><a href="#/centers">我的</a></li> -->


            <!-- router-link作用:  相当于a标签,跳转路由  active-class自定义class 当前路由被选中时才会添加,否则不添加-->
            <!-- <li>
                <router-link to="/films" active-class="aaa">电影</router-link>
            </li>
            <li>
                <router-link to="/cinemas"  active-class="aaa">影院</router-link>
            </li>
            <li>
                <router-link to="/centers"  active-class="aaa">我的</router-link>
            </li> -->

            <!-- router-link定制 -->
            <router-link custom to="/films" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'aaa' : ''" @click="navigate">电影</li>
            </router-link>
            <router-link custom to="/cinemas" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'aaa' : ''" @click="navigate">影院</li>
            </router-link>
            <router-link custom to="/centers" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'aaa' : ''" @click="navigate">我的</li>
            </router-link>
        </ul>
    </div>
</template>

<script>

</script>

<style scoped lang="scss">



.aaa {
    color: red ;
}

.tabbar {
    overflow: hidden;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 10vw;
    line-height: 10vw;
    text-align: center;
    font-size: 3vw;
            color: #fff;

    background-color: #000;

    & ul {
        display: flex;
        list-style: none;

        & li {
            flex: 1;
            // cursor: pointer;s

        }
    }

}
</style>